<template>
  <div class="playerView">
    <span class="close_view" @click="$emit('close')">⬇️</span>
    <div class="needle" :style="{transform: play_state ? '':'rotateZ(-20deg)'}">
      <img
        src="https://s3.music.126.net/mobile-new/img/needle-ip6.png?be4ebbeb6befadfcae75ce174e7db862="
        alt
      />
    </div>
    <div class="content">
      <div class="disc">
        <img
          src="https://s3.music.126.net/mobile-new/img/disc-ip6.png?69796123ad7cfe95781ea38aac8f2d48="
          alt
        />
      </div>
      <div class="cover" :style="{'animation-play-state':play_state?'running':'paused'}">
        <img :src="song_info.picUrl" alt />
      </div>
      <div class="song_info">
        <p>{{ song_info.song_name}}</p>
        <p>{{ song_info.ars | ars_filter}}</p>
      </div>
    </div>
    <slider></slider>
    <div class="song_ctr">
      <i class="iconfont icon-prev" @click.stop="$emit('prev')"></i>
      <i class="iconfont icon-play" v-if="!play_state" @click.stop="play_song"></i>
      <i class="iconfont icon-pause" v-else @click.stop="pause_song"></i>
      <i class="iconfont icon-next" @click.stop="$emit('next')"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import slider from "./slider";
export default {
  components: {
    slider,
  },
  computed: {
    ...mapState(["song_info", "play_state"]),
  },
  methods: {
    pause_song() {
      this.$audio.pause();
    },
    play_song() {
      this.$audio.play();
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.playerView {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: skyblue;
  z-index: 3;
  .needle {
    width: 30vw;
    position: fixed;
    left: 45%;
    z-index: 9;
    // transform: rotateZ(-20deg);
    transform-origin: left top;
    transition: all 0.4s;
    img {
      width: 100%;
    }
  }
  .close_view {
    font-size: 40px;
    position: fixed;
    left: 5%;
    top: 2%;
  }
  .content {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    height: 70vw;
    .disc {
      position: absolute;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
      }
    }
    .cover {
      width: 45vw;
      height: 45vw;
      border-radius: 50%;
      overflow: hidden;
      position: absolute;
      top: calc(50% - 22.5vw);
      animation: rotate 8s linear infinite;
      //   计算属性
      left: calc(50% - 22.5vw);
      //   left: 50%;
      //   transform: translateX(-50%);
      img {
        width: 100%;
      }
    }
    .song_info {
      position: absolute;
      top: 70vw;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
  }
  .song_ctr {
    position: fixed;
    bottom: 10%;
    width: 100vw;
    display: flex;
    justify-content: center;
    text-align: center;
    i {
      width: 20vw;
      font-size: 65px;
      color: white;
    }
  }
}
</style>